<template>
  <div class="table">
    <vxe-toolbar>
    </vxe-toolbar>

    <vxe-table border="outer" resizable show-overflow ref="xTable" header-align="center" max-height="400"
      header-row-class-name="tableHeader" header-cell-class-name="tableHeader" cell-class-name="tableBody"
      :data="tableData" :edit-config="{ trigger: 'click', mode: 'row', showIcon: false }"
      @edit-actived="editActivedEvent">
      <vxe-column field="email" title="指导老师邮箱" :edit-render="{}">
        <template #default="{ row }">
          <span>{{ formatRole(row.email) }}</span>
        </template>
        <template #edit="{ row }">
          <vxe-select v-model="row.email" transfer @change="roleChangeEvent">
            <vxe-option v-for="item in teacherList" :key="item.value" :value="item.value" :label="item.label"
              :disabled="item.disabled"></vxe-option>
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column title="姓名" :edit-render="{}">
        <template #default="{ row }">
          <span>{{ row.email.name }}</span>
        </template>
        <template #edit="{ row }">
          {{ row.email.name }}
        </template>
      </vxe-column>
      <vxe-column title="研究方向" :edit-render="{}">
        <template #default="{ row }">
          <span>{{ row.email.guidance }}</span>
        </template>
        <template #edit="{ row }">
          {{ row.email.guidance }}
        </template>
      </vxe-column>
      <vxe-column title="备注" :edit-render="{}">
        <template #default="{ row }">
          <span>{{ row.email.introduction }}</span>
        </template>
        <template #edit="{ row }">
          {{ row.email.introduction }}
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>
<script>
import { getUserData } from '../utils'
import axios from 'axios'

export default {
  data() {
    return {
      tableData: [
        { email: '' },
        { email: '' },
        { email: '' },
        { email: '' }

      ],
      teacherList: [
      ],
      edit: false,
    }
  },
  created() {
    this.$nextTick(() => {
      this.updateRoleList()
    })
    let userData = getUserData()
    if (userData != undefined) {
      userData = getUserData()
      axios({
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'Token': userData.Token,
        },
        method: 'get',
        url: 'http://api.linwine.space/api/sjk/gp/teacher/add_course',
        responseType: "json",
      }).then((data) => {
        let usefulTeachers = data.data.data.teacher
        for (let i = 0; i < usefulTeachers.length; i++) {
          let teacher = {
            label: usefulTeachers[i].email + "  " + usefulTeachers[i].name,
            value: {
              uid: usefulTeachers[i].uid,
              name: usefulTeachers[i].name,
              email: usefulTeachers[i].email,
              guidance: (usefulTeachers[i].guidance == undefined) ? '' : usefulTeachers[i].guidance,
              introduction: (usefulTeachers[i].introduction == undefined) ? '' : usefulTeachers[i].introduction
            }
          }
          this.teacherList.splice(i, 1, teacher)
        }
        this.teacherList.splice(this.teacherList.length, 1, { label: '', value: { uid: '', name: '', email: '', guidance: '', introduction: '' } })
      })
    }

  },
  methods: {
    formatRole(value) {
      const item = this.teacherList.find(item => item.value === value)
      return value.email
    },
    updateRoleList() {
      const $table = this.$refs.xTable
      // 获取表格中的全量数据
      const { fullData } = $table.getTableData()
      this.teacherList.forEach(item => {
        if (item.value) {
          // 如果当前选项已经被选过，则禁用
          item.disabled = fullData.some(row => row.email === item.value && item.label != '')
        }
      })
      this.sendTableList()
    },
    sendTableList() {
      this.$emit('getTableList', this.tableData)
    },
    roleChangeEvent({ row }) {
      this.updateRoleList()
    },
    editActivedEvent({ row }) {
      // 激活编辑时检查剩余选项是否可选择
      this.updateRoleList()
    },
    getFundData() {
      return getUserData()
    }
  },
  watch: {
    tableData: function (newVal) {
      for (let i = 0; i < newVal.length; i++) {
        if (newVal[i].email != '' && newVal[i].email.uid != '') {
          newVal.splice(classInfo.gTeacherId.length, 1, classInfo.tableList[i].email.uid)
        }
      }
      this.$emit('changeTeacherTable', newVal)
    }
  }
}
</script>
<style scoped>
.table {
  width: 100%;
}
</style>
<style>
.tableHeader {
  background-color: rgb(225, 225, 225);
  border: solid 1px #707070;
  font-family: Source Han Sans CN;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 31px;
  letter-spacing: 0px;
  color: #707070;
}

.tableBody {
  background-color: #fafafa;
  border: solid 1px #707070;
}
.vxe-select.is--active:not(.is--filter) > .vxe-input > .vxe-input--inner{
    border: 1px solid #c1c1c1 !important;
  }
</style>